<!DOCTYPE html>
<html>
<head>
    <meta charset='UTF-8'>
    <title>事件修饰符</title>
    <script src="../js/vue.js"></script>
    <style>
        *{
            margin-top: 20px;
        }
        .demo1{
            height: 50px;
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div id="root">
        <h2>欢迎{{name}}</h2>
        <!-- 阻止默认事件 -->
        <a href="http://www.baidu.com" @click.prevent="showInfo">点击</a>
        <!-- 阻止事件冒泡 -->
        <div class="demo1" @click="showInfo">
        <button  @click.stop="showInfo">点击</button>
        </div>
        <!-- 事件只触发一次 -->
        <button  @click.once="showInfo">点击</button>
    </div>
</body>
<!--   JS   -->
    <script>
        new Vue({
            el:'#root',
            data:{
                name:'琦琦'
            },
            methods:{
                showInfo(e){
                    //e.preventDefault()
                    alert('晚上好')
                }
            }
        })
    </script>
</html>